/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/contact/page.tsx
 * Description: Contact page — practical information cards and validated contact form
 */

import type { Metadata } from "next";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import ContactForm from "@/components/ContactForm";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.contact.title }, description: meta.contact.description };
}

export default async function ContactPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { contact } = getMessages(locale as Locale);

  const infoCards = [
    {
      title: contact.infoEmailTitle,
      body: (
        <a
          href="mailto:contact@spboucher.ai"
          className="font-medium text-accent hover:text-accent-strong"
        >
          contact@spboucher.ai
        </a>
      ),
    },
    { title: contact.infoResponseTitle, body: contact.infoResponse },
    { title: contact.infoLanguagesTitle, body: contact.infoLanguages },
  ];

  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-28">
          <SectionHeading as="h1" title={contact.title} lead={contact.lead} />
        </Container>
      </section>

      <section className="py-16 sm:py-20">
        <Container className="grid gap-12 lg:grid-cols-[1fr_2fr]">
          <div className="flex flex-col gap-4">
            {infoCards.map((card) => (
              <div key={card.title} className="rounded-2xl border border-line bg-card p-6">
                <h2 className="font-mono text-xs uppercase tracking-[0.25em] text-ink-faint">
                  {card.title}
                </h2>
                <p className="mt-2.5 text-sm leading-relaxed text-ink-soft">{card.body}</p>
              </div>
            ))}
          </div>
          <div className="rounded-3xl border border-line bg-card p-8 shadow-sm sm:p-10">
            <ContactForm strings={contact.form} />
          </div>
        </Container>
      </section>
    </>
  );
}